<template>
    <div class="my">
        <top></top>
        <div class="videoBox" style="display: flex;">
            <div class="videoPlay">
                <div class="video">
                    <video :loop="true"
                        src="https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/28372282-949b-4d90-9c67-e8d1c79f6d7d/transcode=true,width=450/justabrazilianroller2.mp4"
                        :autoplay="true"
                        :muted="true"></video>
                    <div class="left">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-chevron-left">
                            <path d="M15 6l-6 6l6 6"></path>
                        </svg>
                    </div>
                    <div class="right">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-chevron-right">
                            <path d="M9 6l6 6l-6 6"></path>
                        </svg>
                    </div>

                    <div class="jinggao">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-info-circle">
                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                            <path d="M12 9h.01"></path>
                            <path d="M11 12h1v4h1"></path>
                        </svg>
                    </div>

                    <div class="caozuo">
                        <div class="flex">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-plus">
                                <path d="M12 5l0 14"></path>
                                <path d="M5 12l14 0"></path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-mood-smile">
                                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                                <path d="M9 10l.01 0"></path>
                                <path d="M15 10l.01 0"></path>
                                <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
                            </svg>
                        </div>

                        <div class="flex">
                            👍
                            22
                        </div>
                        <div class="flex">
                            ❤️
                            28
                        </div>
                        <div class="flex">
                            😂
                            3
                        </div>
                        <div class="flex huizhang">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                                <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
                            </svg>
                            40
                        </div>
                    </div>
                </div>
                <div class="see">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        class="tabler-icon tabler-icon-eye">
                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                        </path>
                    </svg>
                    628
                </div>
                <div class="more">

                    <div class="li" @click="showShare = !showShare">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-share-3">
                            <path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7z">
                            </path>
                        </svg>

                        <div class="shareBox" v-if="showShare">
                            <div class="name">{{ $t('info.info1') }}</div>
                            <i class="imng">
                                <img src="../../assets/shang.png" alt="" srcset="">
                            </i>
                            <div class="checkucibs">
                                <div class="li2s">
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="tabler-icon tabler-icon-bookmark">
                                            <path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z"></path>
                                        </svg> </div>
                                    <span>{{ $t('info.info2') }}</span>
                                </div>
                                <div class="li2s">
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="tabler-icon tabler-icon-copy">
                                            <path
                                                d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z">
                                            </path>
                                            <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
                                        </svg></div>
                                    <span>{{ $t('info.info3') }}</span>
                                </div>
                                <div class="li2s">
                                    <div class="icon"><svg viewBox="0 0 60 60" focusable="false"
                                            style="pointer-events: none; display: block; width: 100%; height: 100%;">
                                            <g fill-rule="nonzero" fill="none">
                                                <path
                                                    d="M28.4863253 59.9692983c-6.6364044-.569063-11.5630204-2.3269561-16.3219736-5.8239327C4.44376366 48.4721168 3e-7 39.6467924 3e-7 29.9869344c0-14.8753747 10.506778-27.18854591 25.2744118-29.61975392 6.0281072-.9924119 12.7038532.04926445 18.2879399 2.85362966C57.1386273 10.0389054 63.3436516 25.7618627 58.2050229 40.3239688 54.677067 50.3216743 45.4153135 57.9417536 34.81395 59.5689067c-2.0856252.3201125-5.0651487.5086456-6.3276247.4003916z"
                                                    fill="#FF4500"></path>
                                                <path
                                                    d="M34.1335847 43.9991814c1.6336774-.3831682 2.81654-.7939438 3.9781753-1.3815065 3.6153903-1.8286959 5.8788354-4.8645264 5.8788354-7.8849481 0-.9131088.0196207-.9556355.780668-1.6923265.6040409-.5847092.8404012-.962515 1.044679-1.6698428.2433185-.8425206.2441028-.9826228.0100139-1.7878614-.6566532-2.2588075-3.0054252-3.2764371-5.1075029-2.212882l-.8124519.4110627-.837264-.5151716c-1.6101652-.9907471-4.473974-1.96108051-6.3205111-2.14155924-.5059537-.04945042-1.143803-.1235464-1.4174535-.16465815l-.4975382-.07474783.2136595-1.06953332c.1175125-.5882423.3623778-1.7491883.5441475-2.57987956.181767-.83069153.4095191-1.95749071.5061138-2.50399817.1396137-.78991765.2348596-.99365031.4645331-.99365031.1589005 0 1.2955101.21462853 2.5257988.4769522 1.2302915.26232367 2.2622022.47695193 2.293134.47695193.0309345 0 .1003234.23497925.154203.52217616.1363137.72661143.4902897 1.17780487 1.2134714 1.54674469 1.7356128.8854428 3.6891485-.29431302 3.6891485-2.22790474 0-2.3956262-2.9538443-3.44186625-4.4550019-1.57794377-.2901205.36022881-.4356746.42625561-.7154284.32453216-.1931649-.07023833-1.5202546-.3669593-2.9490951-.65938053-1.8923676-.38728585-2.6686067-.48706487-2.8582979-.36740978-.2896185.1826864-.2522224.047706-1.0501419 3.79055007-.9490696 4.45187338-1.0064011 4.70400786-1.0882029 4.78580828-.0432388.04324046-.729551.14596475-1.5251367.22827402-2.413687.24971784-5.06621906 1.10194849-6.8544721 2.20227189l-.8268564.5087695-.81204644-.4046587c-2.11972653-1.0563058-4.47243958-.0382468-5.1287215 2.2192841-.23408885.8052386-.23330375.9453408.0100166 1.7878614.20427624.7073278.44063816 1.0851336 1.04467744 1.6698428.76105187.736691.78066878.7792177.78066878 1.6923265 0 4.172347 4.28816886 8.1540991 10.01599352 9.3002929 1.8975637.3797217 2.0263168.3894072 4.4515526.3349143 1.5849893-.0356103 2.7274992-.1508298 3.6566327-.3687526zm-6.6864685-3.0300366c-1.3154638-.2961613-2.8032079-.9569232-3.2391341-1.4386156-.34760429-.384099-.198986-.9659493.246724-.9659493.1736296 0 .5801788.1805458.9034441.4012095 2.1828306 1.4900284 7.1085991 1.484628 9.2987021-.0101767.7054363-.4814861 1.2827246-.468194 1.3538857.0311679.0334854.234998-.1164569.4687666-.4771278.7438635-1.7511846 1.3356924-5.2646974 1.8738181-8.086494 1.2385197v-.000019zm-4.01196195-5.9075609c-.81902983-.4443886-1.22403999-1.1532958-1.22477787-2.143771-.000787-1.135302.52653614-1.8699603 1.59778946-2.2257735.76240766-.253232.85344696-.2532238 1.51689516.0001492 1.785415.6818561 2.1507834 2.909296.6724678 4.0996229-.7705198.6204159-1.7299516.7214286-2.56237455.2697724zm11.09588945.0732995c-.7590038-.3947507-1.1832989-.8746601-1.3628596-1.5414995-.3321829-1.2336253.2931784-2.4377233 1.5067529-2.9011953.6634485-.253373.754488-.2533812 1.5168976-.0001492 1.0712525.3558132 1.5986343 1.0904715 1.5977903 2.2257735-.0008141 1.0085002-.4138259 1.7116813-1.2587076 2.1427072-.7599699.3877084-1.3548626.4098285-1.9998736.0743633z"
                                                    fill="#FDFDFD"></path>
                                            </g>
                                        </svg></div>
                                    <span>{{ $t('info.info4') }}</span>
                                </div>
                                <div class="li2s">
                                    <div class="icon" style="background-color: black;"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"
                                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="tabler-icon tabler-icon-brand-x">
                                            <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
                                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
                                        </svg></div>
                                    <span>{{ $t('info.info5') }}</span>
                                </div>
                                <div class="li2s">
                                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="tabler-icon tabler-icon-dots">
                                            <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                            <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                            <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                        </svg> </div>
                                    <span>{{ $t('info.info6') }}</span>
                                </div>

                            </div>
                        </div>


                    </div>
                    <div class="li" @click="showMore = !showMore">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-dots-vertical"
                            filter="drop-shadow(1px 1px 2px rgb(0 0 0 / 50%)) drop-shadow(0px 5px 15px rgb(0 0 0 / 60%))">
                            <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                            <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                            <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                        </svg>

                        <div class="moreBoxs" v-if="showMore">
                            <div class="lisa">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-bookmark"><path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z"></path></svg>
                                <span>{{ $t('info.info21') }}</span>
                            </div>
                            <div class="lisa">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-flag"><path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9z"></path><path d="M5 21v-7"></path></svg>
                                <span>{{ $t('info.info22') }}</span>
                            </div>
                            <div class="lisa">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-eye"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path></svg>
                                <span>{{ $t('info.info23') }}</span>
                            </div>
                            <div class="lisa">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-eye-off"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"></path><path d="M3 3l18 18"></path></svg>
                                <span>{{ $t('info.info24') }}</span>
                            </div>
                            <div class="lisa">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-user-off"><path d="M8.18 8.189a4.01 4.01 0 0 0 2.616 2.627m3.507 -.545a4 4 0 1 0 -5.59 -5.552"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4c.412 0 .81 .062 1.183 .178m2.633 2.618c.12 .38 .184 .785 .184 1.204v2"></path><path d="M3 3l18 18"></path></svg>
                                <span>{{ $t('info.info25') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="li" @click="backPage">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-x">
                            <path d="M18 6l-12 12"></path>
                            <path d="M6 6l12 12"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="videoPinglun">
                <div class="user">
                    <div class="touxiangs">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4f5df9c-74df-4a6c-ac3b-5534a7626188%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711271535&t=1e177b1665857443acee0c14426505d7"
                            alt="" srcset="">
                        <div class="text">
                            <div class="name">
                                Sharam
                            </div>
                            <div class="desc">
                                {{ $t('info.info7') }}
                            </div>
                        </div>

                    </div>
                    <div class="btns">
                        <div class="li">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="tabler-icon tabler-icon-bolt">
                                <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
                            </svg>
                            {{ $t('info.info8') }}
                        </div>
                        <div class="li" style="color: rgb(165, 216, 255);background-color: rgba(25, 113, 194, 0.2);">
                            {{ $t('info.info9') }}
                        </div>
                        <svg style="margin-left: 10px;" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-layout-sidebar-right-collapse">
                            <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
                            </path>
                            <path d="M15 4v16"></path>
                            <path d="M9 10l2 2l-2 2"></path>
                        </svg>
                    </div>
                </div>
                <div class="smallbtn">
                    <div class="lef">
                        <div class="one">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-eye">
                                <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                                <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6">
                                </path>
                            </svg>
                            <span style="margin-left: 5px;">{{ $t('info.info20') }}</span>
                        </div>
                        <div class="one" @click="hasadd = !hasadd" :class="hasadd?'hasaddClass':''">
                            <svg  xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-bookmark">
                                <path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="lef">
                        <div class="one">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-flag">
                                <path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9z"></path>
                                <path d="M5 21v-7"></path>
                            </svg>
                        </div>
                        <div class="one">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-dots-vertical">
                                <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="tags">
                    <div class="lineBox">
                        <span>{{ $t('info.info10') }}</span>
                    </div>
                    <div class="li active">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-plus">
                            <path d="M12 5l0 14"></path>
                            <path d="M5 12l14 0"></path>
                        </svg>
                        <span>{{ $t('info.info11') }}</span>
                    </div>
                    <div class="li">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-up">
                            <path
                                d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z">
                            </path>
                        </svg>
                        <span>{{ $t('info.info12') }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-down">
                            <path
                                d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
                            </path>
                        </svg>
                    </div>
                    <div class="li">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-up">
                            <path
                                d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z">
                            </path>
                        </svg>
                        <span>{{ $t('info.info13') }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-down">
                            <path
                                d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
                            </path>
                        </svg>
                    </div>
                    <div class="li">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-up">
                            <path
                                d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z">
                            </path>
                        </svg>
                        <span>{{ $t('info.info14') }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24"
                            fill="rgba(255, 255, 255, 0.3)" stroke="currentColor" stroke-width="0" stroke-linecap="round"
                            stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-big-down">
                            <path
                                d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
                            </path>
                        </svg>
                    </div>
                </div>

                <div class="caozuo" style="position: relative;bottom: -6px;background: none;">

                    <div class="flex">
                        👍
                        22
                    </div>
                    <div class="flex">
                        ❤️
                        28
                    </div>
                    <div class="flex">
                        😂
                        3
                    </div>
                    <div class="flex huizhang">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
                        </svg>
                        40
                    </div>
                </div>


                <div class="enterInput">
                    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4f5df9c-74df-4a6c-ac3b-5534a7626188%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711271535&t=1e177b1665857443acee0c14426505d7"
                        alt="" srcset="">
                    <input type="text" placeholder="Type your comment...">
                </div>

                <div class="userenterbox">
                    <div class="listsa" v-for="(item, index) in 3" :key="index">
                        <div class="usersa">
                            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4f5df9c-74df-4a6c-ac3b-5534a7626188%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711271535&t=1e177b1665857443acee0c14426505d7"
                                alt="" srcset="">
                            <span class="name">arrnowsw</span>
                            <span class="desc">2 {{ $t('info.info15') }}</span>
                            <div class="more">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical">
                                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                    <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                    <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="vlbox">
                            这个怎么做的
                        </div>
                        <div class="icons">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-plus">
                                <path d="M12 5l0 14"></path>
                                <path d="M5 12l14 0"></path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-mood-smile">
                                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                                <path d="M9 10l.01 0"></path>
                                <path d="M15 10l.01 0"></path>
                                <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
                            </svg>

                            <svg style="margin-left: 10px;" xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round"
                                class="tabler-icon tabler-icon-arrow-back-up">
                                <path d="M9 14l-4 -4l4 -4"></path>
                                <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
                            </svg>
                            <span>{{ $t('info.info16') }}</span>
                        </div>

                        <div class="listsa" style="margin-left: 18px;" v-for="(item, index) in 1" :key="index">
                            <div class="usersa">
                                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4f5df9c-74df-4a6c-ac3b-5534a7626188%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711271535&t=1e177b1665857443acee0c14426505d7"
                                    alt="" srcset="">
                                <span class="name">arrnowsw</span>
                                <span class="desc">2 days ago</span>
                                <div class="more">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical">
                                        <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                        <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                        <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="vlbox">
                                这个怎么做的
                            </div>
                            <div class="icons">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                                    stroke-linejoin="round" class="tabler-icon tabler-icon-plus">
                                    <path d="M12 5l0 14"></path>
                                    <path d="M5 12l14 0"></path>
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
                                    stroke-linejoin="round" class="tabler-icon tabler-icon-mood-smile">
                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                                    <path d="M9 10l.01 0"></path>
                                    <path d="M15 10l.01 0"></path>
                                    <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
                                </svg>

                                <svg style="margin-left: 10px;" xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="tabler-icon tabler-icon-arrow-back-up">
                                    <path d="M9 14l-4 -4l4 -4"></path>
                                    <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
                                </svg>
                                <span>{{ $t('info.info16') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="submitBox">
                    <div class="lineBox" style="top: 30px;">
                        <span>{{ $t('info.info17') }}</span>
                    </div>

                    <div class="wordBixs">
                        <div class="title">
                            <div>{{ $t('info.info18') }}</div>
                            <span>{{ $t('info.info19') }}</span>
                        </div>
                        <div class="iconss">
                            <div class="star">
                                <el-rate v-model="value" void-color="#f08c00" disabled score-template="{value}">
                                </el-rate>
                                <span>2</span>
                            </div>
                            <div class="checks">
                                <div class="li">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="tabler-icon tabler-icon-heart">
                                        <path
                                            d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">
                                        </path>
                                    </svg>
                                    <span>21</span>
                                </div>
                                <div class="li">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="tabler-icon tabler-icon-message-circle-2">
                                        <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
                                    </svg>
                                    <span>3</span>
                                </div>
                                <div class="li">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="tabler-icon tabler-icon-download">
                                        <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                        <path d="M7 11l5 5l5 -5"></path>
                                        <path d="M12 4l0 12"></path>
                                    </svg>
                                    <span>180</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <bottom></bottom>
    </div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'

export default {
    name: 'my',
    components: {
        top,
        bottom
    },
    data() {
        return {
            value: 5,
            showShare: false,
            showMore:false,
            hasadd:false
        }
    },
    mounted() {

    },
    methods: {
        backPage(){
            this.$router.back();
        }
    }
}
</script>

<style lang="less" scoped>
.hasaddClass{
    background-color:#c90c17!important ;
}

.iconss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    .star {
        padding: 4px 10px;
        background-color: #3f4042;
        border-radius: 5px;
        display: flex;
        align-items: center;

        span {
            margin-left: 3px;
            font-size: 13px;
            color: #fff;
        }
    }

    .checks {
        display: flex;
        align-items: center;

        .li {
            font-size: 11px;
            height: 20px;
            line-height: 18px;
            text-decoration: none;
            padding: 0px 5px 0px 3px;
            box-sizing: border-box;
            display: inline-flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            width: auto;
            text-transform: uppercase;
            border-radius: 4px;
            font-weight: 700;
            letter-spacing: 0.25px;
            cursor: inherit;
            text-overflow: ellipsis;
            overflow: hidden;
            border: 1px solid transparent;
            background: rgba(212, 212, 212, 0.2);
            color: white;
            margin-left: 7px;

            svg {
                margin-right: 5px;
            }
        }
    }
}

/deep/ .el-rate__icon {
    margin-right: 0 !important;
}

/deep/ .el-icon-star-on {
    color: #f08c00 !important;
}

.caozuo {
    position: absolute;
    left: 15px;
    bottom: 50px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    gap: 4px;
    border-radius: 4px;
    background: rgba(37, 38, 43, 0.6);
    backdrop-filter: blur(5px) saturate(160%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px 1px;
    padding: 4px;

    .flex {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .huizhang {
        font-size: 11px;
        height: 20px;
        line-height: 18px;
        text-decoration: none;
        box-sizing: border-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: auto;
        text-transform: uppercase;
        border-radius: 2px;
        font-weight: 700;
        letter-spacing: 0.25px;
        cursor: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        background: rgba(240, 140, 0, 0.2);
        color: rgb(245, 159, 0);
        border: 1px solid transparent;
        padding: 10px 3px;
    }
}

.enterInput {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;

    img {
        min-width: 38px;
        min-height: 38px;
        border-radius: 50%;
        margin-right: 10px;
        max-width: 38px;
        max-height: 38px;
    }

    input {
        background-color: rgb(26, 27, 30);
        border-radius: 4px;
        padding: 0px;
        font-size: 14px;
        padding: 10px;
        min-height: 22px;
        cursor: text;
        border: 1px solid rgb(55, 58, 64);
        border-radius: 4px;
        width: 100%;
    }
}

.userenterbox {
    .listsa {
        padding: 10px;
        padding-bottom: 0;

        .vlbox {
            padding: 5px 36px;
            font-size: 13px;
            color: #ccc;
        }

        .icons {
            padding: 5px 36px;
            font-size: 13px;
            display: flex;
            align-items: center;
        }

        .usersa {
            display: flex;
            align-items: center;
            position: relative;

            img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .more {
                position: absolute;
                right: 10px;
                top: 10px;
                cursor: pointer;


            }

            .name {
                font-size: 14px;
                color: #ccc;
                margin-right: 10px;
            }

            .desc {
                color: #959595;
            }
        }
    }
}

.submitBox {
    background-color: #25262b;
    width: 100%;
    padding: 0.26667rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    min-height: 50px;
}

.wordBixs {
    outline: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    text-decoration: none;
    color: rgb(193, 194, 197);
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid rgb(55, 58, 64);
    position: relative;
    overflow: hidden;
    background-color: rgb(26, 27, 30);
    opacity: 1;
    padding: 10px;
    margin-top: 40px;

    .title {
        display: flex;
        align-items: center;
        position: relative;
        padding-right: 100px;

        div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            color: #ccc;
        }

        span {
            position: absolute;
            right: 0;
            font-size: 10px;
            height: 18px;
            line-height: 16px;
            text-decoration: none;
            padding: 0px 8px;
            box-sizing: border-box;
            display: inline-flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            width: auto;
            text-transform: uppercase;
            border-radius: 4px;
            font-weight: 700;
            letter-spacing: 0.25px;
            cursor: inherit;
            text-overflow: ellipsis;
            overflow: hidden;
            background: rgba(25, 113, 194, 0.2);
            color: rgb(165, 216, 255);
            border: 1px solid transparent;
        }
    }
}

.lineBox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(55, 58, 64);
    left: 0;

    span {
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        color: #c1c2c5;
    }
}

.tags {
    display: flex;
    align-items: center;
    background-color: #25262b;
    height: 1.52rem;
    width: 100%;
    padding: 0.26667rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;



    .li {
        font-size: 11px;
        height: 20px;
        line-height: 18px;
        text-decoration: none;
        padding: 0px;
        box-sizing: border-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: auto;
        text-transform: uppercase;
        border-radius: 2px;
        font-weight: 700;
        letter-spacing: 0.25px;
        text-overflow: ellipsis;
        overflow: hidden;
        border: 1px solid rgb(62, 68, 74);
        position: relative;
        background: rgba(52, 58, 64, 0.3);
        color: rgb(255, 255, 255);
        cursor: pointer;
        user-select: none;
        padding: 0 6px;
        margin-right: 3px;

        svg {
            width: 15px;
        }
    }

    .active {
        background: rgba(25, 113, 194, 0.2);
        border: 1px solid rgba(37, 120, 197, 0.2);
        cursor: pointer;
        color: rgb(165, 216, 255);
    }
}

.videoPlay {
    width: 75%;
    height: calc(100vh - 100px);
    position: relative;
    border-right: 1px solid rgb(55, 58, 64);

    .video {
        width: 100%;
        height: 100%;
        position: relative;

        .jinggao {
            position: absolute;
            right: 10px;
            bottom: 50px;
            width: 30px;
            min-width: 30px;
            border-radius: 32px;
            padding: 0px;
            line-height: 1;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            height: 30px;
            backdrop-filter: blur(7px);
            color: white;
            background: rgba(52, 58, 64, 0.4);
        }



        video {
            margin: 0 auto;
            display: block;
        }

        .left {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;

            svg {
                height: 50px;
                width: 50px;
            }
        }

        .right {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;

            svg {
                height: 50px;
                width: 50px;
            }
        }
    }

    .see {
        box-sizing: border-box;
        display: flex;
        flex-flow: wrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: start;
        justify-content: flex-start;
        gap: 2px;
        text-transform: uppercase;
        border-radius: 32px;
        font-weight: 700;
        letter-spacing: 0.25px;
        cursor: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        border: 1px solid transparent;
        height: 30px;
        backdrop-filter: blur(7px);
        color: white;
        background: rgba(52, 58, 64, 0.4);
        position: absolute;
        left: 10px;
        padding: 0 10px;
        z-index: 10;
        top: 10px;
    }

    .more {
        position: absolute;
        right: 10px;
        z-index: 10;
        top: 10px;
        display: flex;
        align-items: center;


        .li {
            min-height: 30px;
            width: 30px;
            min-width: 30px;
            border-radius: 32px;
            padding: 0px;
            line-height: 1;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            height: 30px;
            backdrop-filter: blur(7px);
            color: white;
            background: rgba(52, 58, 64, 0.4);
            margin-left: 10px;
            cursor: pointer;
            position: relative;

            .moreBoxs{
                position: absolute;
                background: rgb(37, 38, 43);
                border: 1px solid rgb(55, 58, 64);
                box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
                border-radius: 4px;
                width: 225px;
                left: -235px;
                top: 0;
                z-index: 100;
                outline: none;
                box-sizing: border-box;
                padding: 5px;
                .lisa{
                    height: 36px;
                    display: flex;
                    align-items: center;
                    padding-left: 10px;
                    color: rgb(193, 194, 197);
                    font-size: 13px;
                    border-radius: 5px;
                    svg{
                        margin-right: 7px;
                    }
                }

                .lisa:hover{
                    background-color: rgba(92, 95, 102, 0.35);
                }

            }
            .shareBox {
                position: absolute;
                background: rgb(37, 38, 43);
                border: 1px solid rgb(55, 58, 64);
                box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
                border-radius: 4px;
                width: 356px;
                left: -320px;
                top: 45px;
                z-index: 100;
                outline: none;

                .imng {
                    position: absolute;
                    top: -13px;
                    width: 19px;
                    right: 14px;
                    z-index: 10;
                }

                .name {
                    color: #ccc;
                    font-size: 15px;
                    padding: 12px 16px;
                }

                .checkucibs {
                    display: flex;
                    flex-wrap: wrap;
                    padding-bottom: 20px;

                    .li2s {
                        display: flex;
                        flex-direction: column;
                        width: 25%;
                        align-items: center;
                        margin-top: 15px;

                        span {
                            text-align: center;
                            margin-top: 5px;
                            font-weight: bold;
                            font-size: 13px;
                        }
                    }

                    .icon {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        background-color: rgb(52, 58, 64);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

        }
    }
}

.smallbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid rgb(55, 58, 64);

    .lef {
        display: flex;
        align-items: center;

        .one {
            padding: 0px 10px;
            appearance: none;
            text-align: left;
            text-decoration: none;
            box-sizing: border-box;
            height: 30px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            -webkit-tap-highlight-color: transparent;
            width: auto;
            border-radius: 32px;
            font-weight: 600;
            position: relative;
            line-height: 1;
            font-size: 13px;
            user-select: none;
            cursor: pointer;
            border: 1px solid transparent;
            background-color: rgb(52, 58, 64);
            color: rgb(254, 254, 254);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;

        }
    }
}

.videoPinglun {
    width: 25%;
    box-sizing: border-box;
    box-sizing: border-box;
    height: calc(100vh - 93px);
    overflow-y: scroll;

    .user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #25262b;
        height: 57px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;

        .btns {
            display: flex;
            align-items: center;
            margin-right: 10px;

            .li {
                padding: 0px 12px 0px 8px;
                appearance: none;
                text-align: left;
                text-decoration: none;
                box-sizing: border-box;
                height: 30px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
                -webkit-tap-highlight-color: transparent;
                display: inline-block;
                width: auto;
                border-radius: 32px;
                position: relative;
                user-select: none;
                cursor: pointer;
                border: 1px solid transparent;
                background-color: rgb(52, 58, 64);
                font-size: 12px;
                font-weight: 600;
                line-height: 1.5;
                color: rgb(252, 156, 45);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 10px;
                cursor: pointer;
            }
        }

        .touxiangs {
            display: flex;
            align-items: center;

            .name {
                font-size: 15px;
                color: #e55b53;
            }

            .desc {
                color: #c1c2c5;
            }

            img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 8px;

            }
        }
    }
}

@media screen and (max-width:768px) {
    .videoPinglun {
        display: none;
    }

    .caozuo {
        bottom: 30px;
    }

    .videoPlay {
        width: 100%;
        height: calc(100vh - 114px);

        .more {
            .li {
                .shareBox {
                    width: 338px;
                    left: -235px;
                }
            }
        }

        .video {
            height: 100%;

            video {
                width: 100%;
                height: 100%;
            }

            .jinggao {
                bottom: 30px;
            }
        }
    }
}</style>
